<template>
  <div class="app-container">
    <div class="container-hole">
      <div class="app-left">
        <div class="box-info">
          <defectSearch
            @defectData-event="getAllDefectData"
            :pageListen="pageListen"
          ></defectSearch>
        </div>
        <div class="box-echart">
          <div class="headboard_top">
            <h4>缺陷统计</h4>
          </div>
          <div class="headboard_bot">
            <defectEchart :echartDataFather="echartData"></defectEchart>
          </div>
        </div>
        <div class="box-table">
          <div class="box-table_top">
            <h4>缺陷明细</h4>
          </div>
          <div class="box-table-main">
            <defectTable :defectData="defectData"></defectTable>
          </div>

          <div class="box-pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.page"
              :page-sizes="[20, 40, 60, 80]"
              :page-size="searchForm.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="app-right">
        <defectMap :searchFormFather="searchForm"></defectMap>
      </div>
    </div>
  </div>
</template>
  
  <script>
import defectSearch from "../workbench/components/defect-search/second.vue";
import defectEchart from "../workbench/components/defect-echart/index.vue";
import defectTable from "../workbench/components/defect-table/index.vue";
import defectMap from "../workbench/components/defect-map/index.vue";
import * as api from "./api";

export default {
  name: "app-main",
  data() {
    return {
      // 瑕疵数据
      defectData: [],
      //条件搜索
      searchForm: {
        batchnum: "",
        reelnum: "",
        machinecode: "",
        page: 1,
        limit: 20,
        startTime: "",
        endTime: "",
        isAll: "",
        defectType: "",
      },
      // 总瑕疵数据
      total: 0,
      // 瑕疵种类名
      nameData: [],
      // 瑕疵种类数量
      categoryCounts: [],
      // echart数据
      echartData: {},
      // 监听页码
      pageListen: {
        page: 1,
        limit: 20,
      },
    };
  },
  components: {
    defectSearch,
    defectEchart,
    defectTable,
    defectMap,
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.searchForm.limit = val;
      this.pageListen.limit = val;
      this.defectData = [];
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.pageListen.page = val;
      this.defectData = [];
    },
    getAllDefectData(data) {
      this.defectData = data.defectData;
      this.total = data.total;
      this.echartData = {
        categoryCounts: data.categoryCounts,
        nameData: data.nameData,
      };
      (this.searchForm.batchnum = data.batchnum),
        (this.searchForm.reelnum = data.reelnum),
        (this.searchForm.machinecode = data.machinecode);
      this.searchForm.startTime = data.startTime;
      this.searchForm.endTime = data.endTime;
      this.searchForm.isAll = data.isAll;
      this.searchForm.defectType = data.defectType;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.app-container {
  display: flex;
  height: 100%;
  min-height: 250px;
  padding: 0px 6px 0px 5px;
  margin-right: auto;
  margin-left: auto;
  .container-hole {
    display: flex;
    height: 88vh;
    width: 100%;
    .app-left {
      width: 55%;
      height: 99.8%;
      .box-info {
        height: 16%;
        align-items: center;
        position: relative;
        border-top: 0;
        width: 100%;
        background: #fff;
        border-radius: 4px;
        padding: 5px;
        display: block;
        border: 1px solid #dce3e6;
        border-radius: 4px;
        -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      }
      .box-echart {
        color: #246177;
        margin-top: 5px;
        height: 27.5%;
        align-items: center;
        position: relative;
        border-top: 0;
        width: 100%;
        background: #fff;
        border-radius: 4px;
        padding: 5px;
        display: block;
        border: 1px solid #dce3e6;
        border-radius: 4px;
        -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        .headboard_top {
          height: 12%;
          width: 100%;
          border-bottom: 0.1px solid #8cb5c4;
        }
        .headboard_bot {
          margin-top: 4px;
          height: 87%;
          width: 100%;
          // border: 1px solid #fa0808;
        }
      }
      .box-table {
        color: #246177;
        margin-top: 5px;
        height: 55.5%;
        align-items: center;
        position: relative;
        border-top: 0;
        width: 100%;
        background: #fff;
        border-radius: 4px;
        padding: 5px;
        display: block;
        border: 1px solid #dce3e6;
        border-radius: 4px;
        -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        .box-table_top {
          height: 6%;
          width: 100%;
          // border-bottom: 1px solid #000000;
        }
        .box-table-main {
          height: 85%;
          width: 100%;
        }
        .box-pagination {
          padding: 5px;
        }
      }
    }
    .app-right {
      margin-left: 6px;
      width: 43.5%;
      padding: 5px;
      height: 100%;
      align-items: center;
      position: relative;
      border-top: 0;
      background: #fff;
      border-radius: 4px;
      display: block;
      border: 1px solid #dce3e6;
      border-radius: 4px;
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    }
  }
}
</style>
  